<template>
  <div class="home">
    <!--web-->
    <div class="web" v-if="$store.state.type == 1">
      <img src="../assets/temp/banner.png" class="banner" style="width:100vw">
      <!--最新动态-->
      <div class="titles">
        <div class="box">
          <div class="icon">最新动态</div>
          <div class="news">
            <div class="title"
                 :style="{width:950 * dtList.length +'px',transform:`translateX(${-950 * dtIndex}px)`}">
              <div style="width: 950px" v-for="(item,index) in dtList" :key="index">{{ item.title }}{{ index }}</div>
            </div>
          </div>
          <!--翻页-->
          <div class="btns">
            <img src="../assets/Home/left.png" @click="changeNewsIndex(2)">
            <img src="../assets/Home/right.png" @click="changeNewsIndex(1)">
          </div>
        </div>
      </div>

      <!--企业简介-->
      <div class="jianjie">
        <div class="title">
          <img src="@/assets/Home/icon1.png" alt="">
          <div style="margin: 0 10px">企业简介</div>
          <img src="@/assets/Home/icon2.png" alt="">
        </div>
        <div class="text">COMPANY PROFIL</div>
        <div class="jianjie-box">
          <div class="jianjie-left">
            <video src="https://www.runoob.com/try/demo_source/mov_bbb.mp4" autoplay></video>
          </div>
          <div class="jianjie-right">
            <p>
              （江苏）有限公司（以下简称“利晶微电子”）于2020年3月26日在无锡市梁溪区注册成立。其由利亚德集团与台湾晶电集团共同注资。公司前期将投资13.3亿元人民币，建设全球首个利用巨量转移技术实现Mini/Micro
              LED显示产品大规模量产的产业基地（以下简称“量产基地”）。
            </p>
            <p>
              利晶微电子业务涵盖Mini
              LED和MicroLED在大陆的设计研发、生产、销售等整条“产业链”。量产基地建成后，将加速研发和生产以倒装封装、巨量转移为主要生产工艺的Mini LED背光显示、Mini/Micro自发光显示产品，以实现
              Mini/Micro LED 显示模组及相关产品的产业化。
            </p>
            <p>2020年10月，利晶微电子按计划正式投产。预计2023年正式达产，销售额预计可达50亿元人民币。</p>
          </div>
        </div>
      </div>

      <!--利晶事业部-->
      <div class="shiye">
        <div class="title">
          <img src="@/assets/Home/icon1.png" alt="">
          <div style="margin: 0 10px">利晶事业部</div>
          <img src="@/assets/Home/icon2.png" alt="">
        </div>
        <div class="text">SOLUTIONS</div>
        <div class="shiye-box">
          <img src="../assets/Home/bg1.png" style="width: 400px;height: 515px">
          <div style="margin-left: 10px">
            <img src="../assets/Home/bg2.png" style="width: 440px;height: 258px;margin-right: 10px">
            <img src="../assets/Home/bg3.png" style="width: 340px;height: 258px">
            <img src="../assets/Home/bg4.png" style="width: 210px;height: 240px;margin-top: 10px;margin-right: 10px">
            <img src="../assets/Home/bg5.png" style="width: 570px;height: 240px;margin-top: 10px">
          </div>
        </div>
      </div>

      <!--新闻中心-->
      <div class="zhongxin">
        <div class="title">
          <img src="@/assets/Home/icon1.png" alt="">
          <div style="margin: 0 10px">新闻中心</div>
          <img src="@/assets/Home/icon2.png" alt="">
        </div>
        <div class="text">NEWS CENTER</div>
        <div class="zhongxin-box">
          <div class="left">
            <div class="swiper" :style="{width: newsList1.length,transform:`translateX(${-550 * newsIndex}px)`}">
              <div class="item" v-for="(item,index) in newsList1" :key="index" @click="goUtl(item)">
                <img :src="item.img">
                <div style="padding: 20px">
                  <div class="swiper-title">{{ item.title }}</div>
                  <div class="time">{{ item.time }}</div>
                </div>
              </div>
            </div>
            <div class="swiper-btn">
              <div class="item" :class="{active:index == newsIndex}" v-for="(item,index) in newsList1" :key="index"
                   @click="newsIndex = index"></div>
            </div>
          </div>
          <div class="right">
            <div v-for="(item,index) in newsList2" :key="index" class="right-item">
              <div class="right-left">
                <div class="day">{{item.time1}}</div>
                <div class="time">{{item.time2}}</div>
              </div>
              <div class="right-right">
                <div class="title1">{{item.title1}}</div>
                <div class="title2">{{item.title2}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!--分割图-->
      <div class="fenge">
        <div class="title">聚焦产业互联网 创造产业新价值</div>
        <div class="text">
          利晶微电子聚焦产业互联网，采用新一代信息技术打造“产业互联网应用引擎”，以B2B2C的业务模式，赋能智慧能源、智慧家庭、公共服务、数字城市、工业互联网、新外贸等行业，助力产业创新与升级，创造新的客户价值，提升客户体验。
        </div>
        <div class="fenge-box">
          <div class="item">
            <div style="font-size: 24px;margin-bottom: 40px">2019年</div>
            <div>始建于</div>
          </div>
          <div class="item">
            <div style="font-size: 24px;margin-bottom: 40px">4000人</div>
            <div>现有员工</div>
          </div>
          <div class="item">
            <div style="font-size: 24px;margin-bottom: 40px">22+</div>
            <div>分支机构</div>
          </div>
          <div class="item">
            <div style="font-size: 24px;margin-bottom: 40px">8项</div>
            <div>专利数量</div>
          </div>
        </div>
      </div>

      <!--合作伙伴-->
      <div class="hezuo">
        <div class="title">
          <img src="@/assets/Home/icon1.png" alt="">
          <div style="margin: 0 10px">合作伙伴</div>
          <img src="@/assets/Home/icon2.png" alt="">
        </div>
        <div class="text">PARTNERS</div>
        <div class="grid">
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
        </div>
      </div>

    </div>

    <div v-else>

    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dtIndex: 0,
      dtList: [],
      newsIndex: 0,
      newsList1: [],
      newsList2: []
    }
  },
  created() {
    // 轮播动态
    setInterval(() => {
      this.changeNewsIndex(1)
    }, 1000)
    this.initBannerList()
  },
  methods: {
    initBannerList() {
      // 。。。。
      // 调后台接口(假数据)
      this.dtList = [
        {url: '', title: '聚焦产业互联网 创造产业新价值聚焦产业互联网 创造产业新价值'},
        {url: '', title: '聚焦产业互联网 创造产业新价值聚焦产业互联网 创造产业新价值'},
        {url: '', title: '聚焦产业互联网 创造产业新价值聚焦产业互联网 创造产业新价值'},
        {url: '', title: '聚焦产业互联网 创造产业新价值聚焦产业互联网 创造产业新价值'},
        {url: '', title: '聚焦产业互联网 创造产业新价值聚焦产业互联网 创造产业新价值'},
        {url: '', title: '聚焦产业互联网 创造产业新价值聚焦产业互联网 创造产业新价值'},
      ]
      this.newsList1 = [
        {title: '利晶正式投产| Micro LED显示，未来已来1', url: '', img: require('../assets/Home/bg6.png'), time: '2020-01-01'},
        {title: '利晶正式投产| Micro LED显示，未来已来2', url: '', img: require('../assets/Home/bg6.png'), time: '2020-01-01'},
        {title: '利晶正式投产| Micro LED显示，未来已来3', url: '', img: require('../assets/Home/bg6.png'), time: '2020-01-01'},
        {title: '利晶正式投产| Micro LED显示，未来已来4', url: '', img: require('../assets/Home/bg6.png'), time: '2020-01-01'}
      ]
      this.newsList2 = [
        {
          title1: '利晶投产为LED显示产业带来哪些影响和机遇？',
          title2: '2020年10月29日，利晶无锡Micro LED量产基地正式投产，标志着全球 Micro LED显示产业化之路正式开启。',
          time1: '23',
          time2:'2021/11',
          url:''
        }, {
          title1: '利晶投产为LED显示产业带来哪些影响和机遇？',
          title2: '2020年10月29日，利晶无锡Micro LED量产基地正式投产，标志着全球 Micro LED显示产业化之路正式开启。',
          time1: '23',
          time2:'2021/11',
          url:''
        }, {
          title1: '利晶投产为LED显示产业带来哪些影响和机遇？',
          title2: '2020年10月29日，利晶无锡Micro LED量产基地正式投产，标志着全球 Micro LED显示产业化之路正式开启。',
          time1: '23',
          time2:'2021/11',
          url:''
        },
      ]
    },
    // 切换新闻
    changeNewsIndex(index) {
      if (index == 1) {
        this.dtIndex = this.dtIndex < this.dtList.length - 1 ? this.dtIndex + 1 : 0
      }
      if (index == 2) {
        this.dtIndex = this.dtIndex > 0 ? this.dtIndex - 1 : this.dtList.length - 1
      }
    },
    // 轮播跳转
    goUtl(item) {
      alert('点击了' + item.title)
    }
  }
}
</script>

<style scoped lang="scss">
.home {
  .web {
    .banner {
      width: 100%;
    }

    .titles {
      margin-top: -5px;
      width: 100%;
      height: 60px;
      background: #4491FF;

      .box {
        width: 1200px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 130px auto 60px;

        .icon {
          transform: translateY(13px);
          width: 122px;
          height: 34px;
          background: #FFFFFF;
          text-align: center;
          line-height: 34px;
          font-size: 16px;
          color: #296FD2;
        }

        .btns {
          width: 60px;
          height: 60px;
          display: flex;
          align-items: center;
          justify-content: space-between;

          img {
            opacity: 0.5;

            &:hover {
              cursor: pointer;
              opacity: 1;
            }
          }
        }

        .news {
          width: 950px;
          overflow: hidden;
          line-height: 60px;

          .title {
            display: flex;
            padding-left: 20px;
            color: #FFFFFF;
            transition: all 1s ease;
          }
        }
      }
    }

    .hezuo,
    .zhongxin,
    .jianjie,
    .shiye {
      width: 1200px;
      margin: 70px auto;

      .title {
        font-size: 28px;
        font-weight: bold;
        color: #083F8F;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .text {
        margin-top: 10px;
        margin-bottom: 20px;
        text-align: center;
        font-size: 14px;
        color: #083F8F;
      }
    }

    .jianjie {
      .jianjie-box {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .jianjie-left {
          width: 576px;
          height: 334px;

          video {
            width: 100%;
            height: 100%;
          }
        }

        .jianjie-right {
          width: 580px;
          line-height: 1.8;

          p {
            margin: 30px 0;
          }
        }
      }
    }

    .shiye {
      .shiye-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }

    .zhongxin {
      .zhongxin-box {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .right{
          width: 600px;
          .right-item{
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 60px;
            &:nth-child(1){
              margin-top: 0;
            }
            .right-left{
              color: #083F8F;
              .day{
                font-size: 55px;
                line-height: 1.5;
              }
              .time{
                font-size: 18px;
              }
            }
            .right-right{
              width: 510px;
              .title1{
                line-height: 3;
                font-size: 24px;
                font-weight: bold;
              }
              .title2{
                font-size: 16px;
                color: #7B7B7B;
              }
            }
          }
        }

        .left {
          width: 550px;
          border: 1px solid #e5e5e5;
          position: relative;
          overflow: hidden;

          .swiper-btn {
            position: absolute;
            right: 0;
            bottom: 20px;
            display: flex;

            .item {
              width: 33px;
              height: 8px;
              background: #EAEAEA;
              margin-right: 20px;
              cursor: pointer;
            }

            .active {
              background: #083F8F;
            }
          }

          .swiper {
            width: 550px;
            height: 480px;
            display: flex;
            transition: all 1s ease;

            .item {
              width: 100%;
              height: 100%;

              img {
                width: 550px;
                height: 370px;
              }

              .swiper-title {
                margin-bottom: 10px;
                text-align: left;
                font-size: 22px;
                color: #083F8F;
              }
            }
          }
        }
      }
    }

    .hezuo {
      .grid {
        display: grid;
        grid-gap: 18px;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(2, 88px);

        .item {
          border: 1px solid #D9D9D9;
        }
      }
    }

    .fenge {
      width: 100%;
      height: 478px;
      background: url("../assets/Home/fenge.png") no-repeat;
      background-size: 100vw auto;
      color: #FFFFFF;
      text-align: center;

      .title {
        padding-top: 70px;
        font-size: 24px;
        font-weight: bold;
      }

      .text {
        width: 1200px;
        font-size: 15px;
        margin: 60px auto;
        line-height: 2;
      }

      .fenge-box {
        display: flex;
        width: 1200px;
        align-items: center;
        justify-content: space-around;
        margin: 0 auto;
      }
    }
  }
}
</style>
